<template>
  <view class="my-container">
    <!-- 用户未登录 -->
    <block v-if="!openid">
      <image
        class="avatar avatar-img"
        src="/static/images/default-avatar.png"
        mode="scaleToFill"
      />
      <view class="login-desc">登录后可同步数据</view>
      <button class="login-btn" type="primary" @click="getUserInfo">
        微信用户一键登录
      </button>
    </block>
    <!-- 已登录 -->
    <block v-else>
      <image
        class="avatar avatar-img"
        :src="userInfo.avatarUrl"
        mode="scaleToFill"
      />
      <view class="login-desc">{{ userInfo.nickName }}</view>
      <button class="login-btn" type="default" @click="onLogoutClick">
        退出登录
      </button>
    </block>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'my-login',
  data() {
    return {
      code: '',
    };
  },
  computed: {
    ...mapState('user', ['token', 'userInfo', 'openid']),
  },
  methods: {
    ...mapActions('user', ['login', 'logout', 'loginAuth']),
    /**
     * 获取用户信息
     */
    // getUserInfo() {
    //   // 展示加载框
    //   uni.showLoading({
    //     title: '加载中',
    //   });
    //   uni.getUserProfile({
    //     desc: '登录后可同步数据',
    //     success: async (obj) => {
    //       console.log('obj', obj);
    //       // 调用 action ，请求登录接口
    //       await this.login(obj);
    //     },
    //     fail: () => {
    //       uni.showToast({
    //         title: '授权已取消',
    //         icon: 'error',
    //         mask: true,
    //       });
    //     },
    //     complete: () => {
    //       // 隐藏loading
    //       uni.hideLoading();
    //     },
    //   });
    // },
    /**
     * 退出登录
     */
    onLogoutClick() {
      uni.showModal({
        title: '提示',
        content: '退出登录将无法同步数据哦~',
        success: ({ confirm, cancel }) => {
          if (confirm) {
            this.logout();
          }
        },
      });
    },

    /**
     *
     * 获取用户信息
     */
    getUserInfo() {
      // 展示加载框
      uni.showLoading({
        title: '加载中',
      });
      uni.getUserProfile({
        desc: '登录后可同步数据',
        success: async (obj) => {
          // 调用 action ，请求登录接口
          uni.login({
            provider: 'weixin',
            success: async (res) => {
              this.code = res.code;
              // console.log('登录获取code', res.code);
              if (res.errMsg == 'login:ok') {
                await this.loginAuth({
                  userProfile: obj,
                  appid: 'wx558224455375e422',
                  code: this.code,
                });
              }
            },
          });
        },
        fail: () => {
          uni.showToast({
            title: '授权已取消',
            icon: 'error',
            mask: true,
          });
        },
        complete: () => {
          // 隐藏loading
          uni.hideLoading();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 25%;
  .avatar-img {
    width: 78px;
    height: 78px;
  }
  .login-desc {
    color: #999;
    font-size: 14px;
    margin-top: 16px;
  }
  .login-btn {
    margin-top: 16px;
    width: 85%;
  }
}
</style>
